<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div>
    <h2>Update CSS Skills With <span class="hl">JS</span></h2>
    <div class="controls">
        <div class="fields">
            <!-- label标签为input标签服务 -->
            <label for="spacing">Spacing</label>
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="range" min="10" max="200" id="spacing" name="spacing" 
            value="50" data-num="120"  data-sizing="px">
            <span id="spacing__res">150px</span>
        </div>
        <div class="fields">
            <label for="blur">Blur</label>
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="range" min="0" max="25" id="blur" name="blur" 
            value="10" data-sizing="px"><span id="blur__res">10px</span>
        </div>
        <div class="fields">
            <label for="color">Base Color</label>
            <!-- 输入控件 html5 更加强大的表单类型 -->
            <input type="color" id="color" name="color" 
            value="#ffc600"><span id="color__res">#ffc600</span>
        </div>
    </div>

    <script>
      const inputs = document.querySelectorAll('.fields input');
    //   console.log(inputs);
      
     // const spacingInput = document.querySelector('#spacing');
    //   console.log(spacingInput); 
     // const blurInput = document.querySelector('#blur');
      // 数组遍历，并调用执行 callback
      inputs.forEach(function(input){
        //   console.log(input);
        input.addEventListener('change',function(event){
            // 抽象的能力  停下复制的习惯
            // console.log(this);
            const res ='#'+ this.id + '__res';
            // console.log(res);
            document.
            querySelector(res).
            innerText=
            this.value+ (this.dataset.sizing?this.dataset.sizing:'');
        })
      })

      
    //  spacingInput.addEventListener('change',function(event){
    //      // js 是事件驱动的语言
    //      // 函数有一个指针  
    //      // this 在 js 中是最重要的基础
    //      // this 在事件处理函数中，指向事件发生的对象
    //       //console.log(event.target.value,this);
    //       console.log(this.value);
    //     //   const sizing = this.dataset.sizing;
    //     // 提升代码的可读性
    //       document.querySelector('#spacing__res').innerText=
    //       this.value + this.dataset.sizing;
    //  })
     
    //  blurInput.addEventListener('change',function(event){
    //      document.querySelector('#blur__res').innerText=
    //       this.value + this.dataset.sizing;
    //  })
    </script>
</body>
</html>